<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- onsubmit="return false" -->
  <form action="https://www.baidu.com" method="">
    <p>
      <label for="">用户名:</label>
      <input type="text" name="user" placeholder="请输入用户名">
      <span></span>
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="password" name="pwd" placeholder="请输入密码">
    </p>
    <p>
      <input type="range" name="ran" value="0" min="0" max="255" step="1">
      <output>0</output>
    </p>
    <p>
      <select name="year" id="">
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
      </select>
    </p>
    <p>
      <label>
        <input type="checkbox" name="isRem">
        是否记住用户名?
      </label>
    </p>
    <p>
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </p>
  </form>
</body>
<script>
  // 键盘事件
  // onfocus     表单聚焦时触发
  // onblur      表单失焦时触发
  // onchange    表单内容发生改变时触发  
  //     (1) 用于输入框和textarea  1. 内容发生改变  2. 失去焦点/enter也可以触发
  //     (2) 用于 input:range  select    内容改变时触发

  // oninput     表单即时输出时触发 (内容发生改变)

  // onsubmit    表单提交时触发 (绑定给form  由提交按钮,回车键提交)
  // onreset     表单重置时触发


  var userInp = document.getElementsByName("user")[0];
  var pwdInp = document.getElementsByName("pwd")[0];
  var ranInp = document.getElementsByName("ran")[0];
  var yearSel = document.getElementsByName("year")[0];
  var form = document.querySelector("form");

  // userInp.onfocus = function(){
  //     console.log("聚焦");
  // }
  // userInp.onblur = function(){
  //     console.log("失焦");
  //     var user = userInp.value.trim();
  //     userInp.value = user;
  //     console.log(user);
  //     // 用户名验证
  // }


  // change 
  // userInp.onchange = function(){
  //     var user = userInp.value.trim();
  //     console.log(user);
  // }

  // ranInp.onchange = function(){
  //     console.log(this.value);
  //     this.nextElementSibling.value = this.value;
  // }

  // yearSel.onchange = function(){
  //     console.log(this.value);
  // }

  // oninput
  // userInp.oninput = function(){
  //     var user = userInp.value.trim();
  //     console.log(user);
  //     if(user.length>=6&&user.length<=12){
  //         this.nextElementSibling.textContent ="√";
  //     }else{
  //         this.nextElementSibling.textContent ="用户名需要在6-12位之间";
  //     }
  // }

  // ranInp.oninput = function(){
  //     console.log(this.value);
  //     this.nextElementSibling.value = this.value;
  // }

  form.onsubmit = function () {
    console.log("表单提交");
    return false;   // 阻止浏览器默认行为 (阻止表单默认提交  => JS提交)
  }

  form.onreset = function () {
    console.log("表单重置");
  }




</script>

</html>